<template>
	<view>
		<view class="container u-skeleton">
			<!-- 个人信息 -->
			<view class="userinfo">
				<block>
					<!--u-skeleton-circle 绘制圆形-->
					<image class="userinfo-avatar u-skeleton-circle" :src="userInfo.avatarUrl"></image>
					<!--u-skeleton-fillet 绘制圆角矩形-->
					<text class="u-skeleton-fillet">{{userInfo.nickName}}</text>
				</block>
			</view>
			<!-- 方格 -->
			<view style="margin: 20px 0">
				<u-grid :col="3">
					<u-grid-item @click="navTo('../../collection/collection')">
						<u-badge count="9" :offset="[20, 20]"></u-badge>
						<u-icon name="star" :size="46"></u-icon>
						<view class="grid-text">我的收藏</view>
					</u-grid-item>
					<u-grid-item @click="navTo('')">
						<!-- <image src="/static/image/icon/hot5.png" class="badge-icon"></image> -->
						<u-badge count="1" :offset="[20, 20]"></u-badge>
						<u-icon name="clock" :size="46"></u-icon>
						<view class="grid-text">浏览记录</view>
					</u-grid-item>
					<u-grid-item @click="navTo('1')">
						<u-icon name="bell" :size="46"></u-icon>
						<view class="grid-text">我的消息</view>
					</u-grid-item>
					<u-grid-item @click="navTo('1')">
						<u-badge count="9" :offset="[20, 20]"></u-badge>
						<u-icon name="order" :size="46"></u-icon>
						<view class="grid-text">我的面试题</view>
					</u-grid-item>
					<u-grid-item @click="navTo('1')">
						<u-icon name="edit-pen" :size="46"></u-icon>
						<view class="grid-text">记录面试题</view>
					</u-grid-item>
					<u-grid-item @click="show = true">
						<u-icon name="red-packet" :size="46"></u-icon>
						<view class="grid-text">打赏作者</view>
					</u-grid-item>
					<u-grid-item @click="navTo('')">
						<u-icon name="kefu-ermai" :size="46"></u-icon>
						<view class="grid-text">联系作者</view>
					</u-grid-item>
					<u-grid-item @click="navTo('1')">
						<u-icon name="thumb-up" :size="46"></u-icon>
						<!-- <u-icon name="thumb-up-fill" :size="46"></u-icon> -->
						<view class="grid-text">点赞小程序</view>
					</u-grid-item>
					<u-grid-item @click="navTo('1')">
						<u-icon name="more-dot-fill" :size="46"></u-icon>
						<view class="grid-text">版本记录</view>
					</u-grid-item>
				</u-grid>
			</view>
		</view>
		<!-- <u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton> -->
		<!-- 弹出层(打赏) -->
		<u-mask :show="show" @click="show = false">
			<view class="warp">
				<image src="../../../static/微信收款码.jpg" mode="aspectFit"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 随意填充一些模拟数据，以撑开元素，供骨架组件查询和模拟块状数据
				userInfo: {
					avatarUrl: 'https://wx.qlogo.cn/mmopen/vi_32/7SncUMUK6icsJXKgjaXVprDadkBEIII00BcibmhH79QcrMJJNY9oH7fvvYyic6zHkf8icQY9ia4oYhuWIJiadtnVuNTw/132',
					nickName: '漫路h'
				},
				// loading: false, // 是否显示骨架屏组件
				show: false // 弹出层,打赏
			}
		},
		methods: {
			/**
			 * 统一调整页面方法
			 */
			navTo(url){
				if(url==1){
					return uni.showToast({
						title:'功能待完善，敬请期待',
						icon:'none'
					})
					// this.$refs['uToast'].show({
					// this.$refs.uToast.show({
					// 	title: '功能待完善，敬请期待',
					// 	type: 'info'
					// })
				}
				uni.navigateTo({
					url:url
				})
			},
		},
		onLoad() {
			// 通过延时模拟向后端请求数据，调隐藏骨架屏
			setTimeout(() => {
				this.loading = false;
			}, 2000)
		}
	}
</script>

<style lang="scss" scoped>
	// 弹出层(打赏) statr
	.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
	// 弹出层(打赏)end
	
	// 方格start
	.badge-icon {
		position: absolute;
		top: 14rpx;
		right: 40rpx;
		width: 30rpx;
		height: 30rpx;
	}
	
	.grid-text {
		font-size: 28rpx;
		margin-top: 4rpx;
		color: $u-type-info;
	}
	//方格end
	
	//个人信息start
	.container {
		padding: 20rpx 60rpx;
	}

	.userinfo {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.userinfo-avatar {
		width: 128rpx;
		height: 128rpx;
		margin: 20rpx;
		border-radius: 50%;
	}
	//个人信息end
</style>